<!--
 * @Description: 实时监测
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:20:33
-->
<template>
  <div>
    <!-- 树形控件 -->
    <el-col :span="6">
      <div class="empData" style="
          padding-right: 10px;
          border-right: 1px solid #ccc;
          height: calc(100vh - 60px);
        ">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <el-tree @node-click="handlerClick" class="filter-tree" :data="data" :props="defaultProps"
          :filter-node-method="filterNode" ref="tree">
        </el-tree>
      </div>
    </el-col>

    <!-- 右边内容 -->
    <el-col :span="18">
      <!-- 导航栏 -->
      <div v-if="params.device_id" style="margin-left: 10px">
        <!-- 统计数值 -->
        <div class="bg">
          <el-row :gutter="20">
            <el-col :span="6">
              <div>
                <el-statistic group-separator="," :precision="2" :value="value2"
                  :title="title"></el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="空气质量比">
                  <template slot="formatter"> 89.2% </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic group-separator="," :precision="2" decimal-separator="."
                  :value="value1" :title="title">
                  <template slot="prefix">
                    <i class="el-icon-s-flag" style="color: red"></i>
                  </template>
                  <template slot="suffix">
                    <i class="el-icon-s-flag" style="color: blue"></i>
                  </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic :value="like ? 21: 22" title="范围">
                  <template slot="suffix">
                    <!-- like=true -->
                    <span @click="like = !like" class="like">
                      <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                      <i class="el-icon-star-off" v-show="!like"></i>
                    </span>
                  </template>
                </el-statistic>
              </div>
            </el-col>
          </el-row>
        </div>


<!-- 默认选择的详情 -->
<!-- 点击详情之后调用的方法 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          进度条{{value}}
          <!-- 双花括号就是把里面的值打印出来 -->
          <el-tooltip :content="'监测: ' + value" placement="top">
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"
              active-value="开启中" inactive-value="已关闭">
            </el-switch>
          </el-tooltip>

          <!-- 按钮结束 -->
          <!-- tabledata为数组 数组里面有很多对象 prop是字段名 -->
          <el-tab-pane label="详情一" name="first"><el-table :data="tableData" style="width: 100%">
              <el-table-column prop="insert_time" label="时间" width="180">
                <template slot-scope="scope">
                  <!-- 组件 下方使用当前行数据时的必要操作 -->
                  <div>
                    <!-- scope.row为当前行的对象  .+名称 即为当前行的某一对象-->
                    {{ scope.row.insert_time | fmtDate }}
                    <!--  -->
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="temperature" label="温度" width="180">
              </el-table-column>
              <el-table-column prop="humidity" label="湿度">
              </el-table-column> </el-table>


            <!-- pm2.5进度条 -->
            <div v-if="value=='开启中'" style="margin-top: 20px">
              <h3>湿度: 35%rh</h3>
              <!-- format 返回进度条后面的文字 -->
              <el-progress :percentage="35" :format="format2"></el-progress>
            </div>


          </el-tab-pane>
          <el-tab-pane label="详情二" name="second"><el-table :data="tableData" style="width: 100%">
              <el-table-column prop="insert_time" label="时间" width="180">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.insert_time | fmtDate }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="pm25" label="pm2.5" width="180">
              </el-table-column>
              <el-table-column prop="wind_speed" label="风速">
              </el-table-column> </el-table>
            <!-- pm2.5进度条 -->
            <div v-if="value=='开启中'" style="margin-top: 20px">
              <h3>pm2.5浓度: 16μg/m3</h3>
              <el-progress :percentage="16" :format="format"></el-progress>
            </div>

          </el-tab-pane>
          <el-tab-pane label="详情三" name="third"><el-table :data="tableData" style="width: 100%">
              <el-table-column prop="insert_time" label="时间" width="180">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.insert_time | fmtDate }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="pm10" label="pm10" width="180">
              </el-table-column>
              <el-table-column prop="wind_direction" label="风向">
              </el-table-column> </el-table>
            <div v-if="value=='开启中'" style="margin-top: 20px">
              <h3>pm10浓度: 21μg/m3</h3>
              <el-progress :percentage="21" :format="format1"></el-progress>
            </div>
          </el-tab-pane>
          <el-tab-pane label="详情四" name="fourth"><el-table :data="tableData" style="width: 100%">
              <el-table-column prop="insert_time" label="时间" width="180">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.insert_time | fmtDate }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="noise" label="噪音" width="180">
              </el-table-column>
              <el-table-column prop="tsp" label="污染物">
              </el-table-column> </el-table>
            <!-- pm2.5进度条 -->
            <div v-if="value=='开启中'" style="margin-top: 20px">
              <h3>噪音: 61pb</h3>
              <el-progress :percentage="61" :format="format3"></el-progress>
            </div>
          </el-tab-pane>
        </el-tabs>

      </div>

      <!-- 当用户没有点击设备时 -->
      <div v-else style="color: red; text-align: center">
        <el-empty :image-size="300" description="请选择设备查看"></el-empty>
      </div>
    </el-col>
  </div>
</template>

<script>
import { get } from '@/utils/request'

export default {
    data() {
        return {
            value: '开启中',
            like: true,
            value1: 21.564,
            value2: 21,
            title: '增长量',
            activeName: 'first',
            tableData: [],
            show: 1,
            activeIndex2: '1',
            // 设备采集的数据
            empData: [],
            // 过滤文本
            filterText: '',
            // 树形结构数据源
            data: [],
            // 树形结构配置项
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            params: {
                page: 1,
                pageSize: 10,
                engineer_id: '',
                device_id: '',
            },
        }
    },
    watch: {
        // 监听文本进行过滤
        filterText(val) {
            this.$refs.tree.filter(val)
        },
    },
    computed: {},
    methods: {
        format(percentage) {
            return percentage === 16 ? 'μg/m3' : `${percentage}%`
        },
        format1(percentage) {
            return percentage === 21 ? 'μg/m3' : `${percentage}%`
        },
        format2(percentage) {
            return percentage === 35 ? '%rh' : `${percentage}%`
        },
        format3(percentage) {
            return percentage === 61 ? 'pb' : `${percentage}%`
        },
        
        handleClick(tab, event) {
            // console.log(tab, event)
        },

        toSearch() {
            this.getEmpData()
        },
        // 点击树形节点
        handlerClick(data) {
            // data 点击工程 data---工程数据 children
            // data 点击设备 data---设备数据 没有children
            // 判断点击的是设备
            if (!data.children) {
                this.params.engineer_id = data.engineer_id
                this.params.device_id = data.id
            }
            if (data.children) {
                this.params.engineer_id = null
                this.params.device_id = null
            }
            this.getEmpData()
        },
        // 获取工程设备采集的数据--右侧数据
        async getEmpData() {
            let res = await get('/monitor/pageQuery', this.params)
            this.empData = res.data.list
            this.tableData = res.data.list
            //   console.log(this.empData[0].device_id);
            //   console.log(this.empData);
        },
        // 获取工程设备 --左侧用到数据
        async loadEmpData() {
            let res = await get('/engineer/findEngineerDeviceTree')
            this.data = res.data
        },
        // 过滤节点的方法
        filterNode(value, data) {
            if (!value) return true
            // return data.label.indexOf(value) !== -1;
            return data.name.indexOf(value) !== -1
        },
    },
    created() {
        this.loadEmpData()
        this.getEmpData()
    },
    mounted() {},
}
</script>
<style lang="scss">

.bg {
  height: 45px; 
  padding-top: 4px;
  background-image: url('../../../assets/bgimg/1.webp');
  background-size: 100%;
}

.title {
    color: black;
    font-size: 13px;
    background-color: #f4f4f4;
    line-height: 42px;
    padding-left: 14px;
    border-left: 5px solid rgb(248, 128, 128);
    
}
.like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
}

.header {
    width: 1288px;
    height: 42px;
    background-color: #f4f4f4;
    line-height: 42px;
    padding-right: 14px;
    border-left: 5px solid rgb(248, 128, 128);
}
</style>  